<template>
  <div>
    <div class="swiper-container gallery-top3">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-if="detail.video != null && detail.video !== ''"
        >
          <video :src="detail.video" controls=""></video>
        </div>
        <span
          class="swiper-slide"
          v-for="(item, index) in detail.resourceIcon"
          :key="index"
        >
          <img :src="item" />
        </span>
      </div>
    </div>

    <div
      class="swiper-container gallery-thumbs3"
      style="height: 116px; margin-top: 20px"
    >
      <div class="swiper-wrapper swiper-left">
        <div
          class="swiper-slide"
          v-if="detail.video != null && detail.video !== ''"
        >
          <img :src="detail.resourceIcon[0]" />
          <img
            src="../../assets/images/btn_Video_ON.png"
            class="video-play-icon"
          />
        </div>
        <div
          class="swiper-slide"
          v-for="(item, index) in detail.resourceIcon"
          :key="index"
        >
          <img :src="item" />
        </div>
      </div>
      <div
        class="swiper-button-next swiper-button-white"
        style="
          background-image: url();
        "
      ></div>
      <div
        class="swiper-button-prev swiper-button-white"
        style="
          background-image: url();
        "
      ></div>
    </div>
    <template v-if="resourceType == 14">
      <div style="margin-bottom: 0px">
        历史记录：<span @click="viewAll" style="float: right">全部 > </span>
      </div>
      <el-table style="width: 100%; float: right" :data="tableData">
        <el-table-column prop="nickName"> </el-table-column>
        <el-table-column prop="email"> </el-table-column>
        <el-table-column prop="createDate"> </el-table-column>
      </el-table>
    </template>
    <el-dialog
      title="历史记录"
      align="center"
      width="800px"
      :visible.sync="dialogTableVisible"
    >
      <el-table border :data="tableData">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          property="nickName"
          label="用户名"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          property="email"
          label="账号"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          property="createDate"
          label="发布时间"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "SwiperDesc",
  props: {
    detail: Object,
  },
  data() {
    return {
      tableData: [],
      showQaTips1: false,
      keyWords: "",
      keyData: null,
      belong: 1,
      dialogTableVisible: false,
    };
  },
  created() {
    this.keyWords = this.detail.searchKeyWord;
    this.belong = this.$route.query.belong;
    this.tableData = this.detail.logList;
    console.log(this.tableData)
    this.resourceType = this.detail.resourceType;
  },
  mounted() {
    initSwiperImages();
  },
  methods: {
    viewAll() {
      this.dialogTableVisible = true;
    },
  },
};

/**
 * 初始化图片滚动
 */
function initSwiperImages() {
  let galleryTop3 = new Swiper(".gallery-top3", {
    spaceBetween: 10,
  });

  let galleryThumbs3 = new Swiper(".gallery-thumbs3", {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: "auto",
    touchRatio: 0.2,
    slideToClickedSlide: true,
    nextButton: ".gallery-thumbs3 .swiper-button-next",
    prevButton: ".gallery-thumbs3 .swiper-button-prev",
  });

  galleryTop3.params.control = galleryThumbs3;
  galleryThumbs3.params.control = galleryTop3;
}
</script>

<style>
/* 滑块区域 */
.swiper-container {
  width: 100%;
  height: 800px;
  margin: 0;
}

.swiper-slide {
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  display: flex;
}

.gallery-top3 {
  height: 548px;
  width: 95%;
}

.gallery-thumbs3 {
  width: 95%;
  height: 13%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs3 .swiper-slide {
  height: 100%;
  width: 136px;
  opacity: 0.4;
}

.gallery-thumbs3 .swiper-slide-active {
  opacity: 1;
  border: 2px solid #4381e6;
}

.swiper-slide img,
video {
  width: 100%;
  height: 100%;
}

.introduction-word {
  background: #ffffff;
  border: 1px solid #979797;
  border-radius: 4px;
  font-size: 16px;
  color: #999999;
  padding: 5px;
  text-align: left;
  line-height: 30px;
  position: absolute;
  z-index: 101;
  display: block;
  margin-left: 225px;
  margin-top: -70px;
}

.tab-icon-mid-text-two {
  font-size: 23.78px;
  color: #007cff;
  border: 1px solid #007cff;
  margin-left: 13px;
  border-radius: 24px;
  width: 24.8px;
  height: 24.8px;
  line-height: 24px;
  text-align: center;
}

.swiper-left {
  transform: translate3d(0px, 0px, 0px) !important;
  width: 80%;
  margin: 0 auto;
}

.video-play-icon {
  position: absolute !important;
  width: 50px !important;
  height: 50px !important;
  z-index: 123 !important;
  display: block !important;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}

.keyworld-style {
  border: 1px solid #4381e6;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 20px 0 0;
  padding-left: 10px;
  padding-right: 10px;
}
.el-dialog__header {
  background-color: #007cff;
}
.el-dialog__title {
  color: #fff;
  font-size: 20px;
}
</style>
